<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            
            * {
                padding: 0;
                margin: 0;
            }

            #box {
                width: 500px;
                height: 500px;
                border: 5px solid blue;
                margin: 10px auto 0;
            }

            #box>div {
                box-sizing: border-box;
                float: left;
                border: 2px solid yellow;
                width: 20px;
                height: 20px;
                background: orange;
                border-radius: 4px;
            }

            #box>.snake {
                background: blue;
            }




        </style>
    </head>
    <body>
        
        <div id="box">

            
        </div>

        
    </body>
</html>
<script>
    
    // 创建地图
    var row = 25;
    var col = 25;

    var speed = 500;

    // 蛇头位置
    var x = 3;
    var y = 0;

    // 方向
    // r 右, l 左, u 上, d 下
    var direction = "d";

    // 地图数组
    var mapArray = [];

    // 小蛇数组
    var snakeArr = [];

    // 定时器
    var timerId = null;

    // 能否改变方向
    var flag = true;

    // 实物坐标
    var foodX = 0, foodY = 0;

    // 获取元素
    var boxDiv = document.getElementById('box');

    // 创建地图
    createMap();

    // 创建小蛇
    createSnake();

    // 创建食物
    randomFood();

    // 小蛇动起来
    snakeRun();


    // 键盘事件控制方向
    document.onkeydown = function(e) {

        // 500ms内不能连续点击
        if (!flag) {
            return;
        }
        flag = false;

        setTimeout(function() {
            flag = true;
        }, 500);

        var d = "";
        switch (e.keyCode) {
            case 37:
                if (direction == "l" || direction == "r") return;
                d = "l";
                break;
            case 39:
                if (direction == "l" || direction == "r") return;
                d = "r";
                break;
            case 38:
                if (direction == "u" || direction == "d") return;
                d = "u";
                break;
            case 40:
                if (direction == "u" || direction == "d") return;
                d = "d";
                break;
            default:
                break;
        }
        direction = d;
    };


    // 创建地图
    function createMap() {
        for (var i = 0; i < row; i++) {
            // 签子
            var rowDiv = [];
            for (var j = 0; j < col; j++) {
                // 创建元素
                var div = document.createElement('div');
                // 拼接元素
                boxDiv.appendChild(div);
                // div是羊肉串
                rowDiv.push(div);
            }
            // 签子穿满羊肉串个放到盘子里
            mapArray.push(rowDiv);
        }
    } 

    // 创建小蛇
    function createSnake() {
        for (var i = 0; i <= x; i++) {
            var div = mapArray[y][i];
            div.className = "snake";
            snakeArr.push(div);
        }
    }

    // 小蛇动起来
    function snakeRun() {
        timerId = setInterval(function() {

            switch (direction) {
                case "r":
                    x++;
                    break;
                case "l":
                    x--;
                    break;
                case "u":
                    y--;
                    break;
                case "d":
                    y++;
                    break;
                default:
                    break; 
            }

            if (judgeGameIsOver()) {
                clearInterval(timerId);
                var isOver = confirm("大侠输了，再来一次?");
                if (isOver) {
                    location.reload();
                }       
                return;      
            }
            // 判断有没有吃到食物
            if (x == foodX && y == foodY) {
                console.log(666);
                var div = mapArray[y][x];
                snakeArr.push(div);
                randomFood();
            } else {
                // 删除尾巴
                var delDiv = snakeArr.shift();
                delDiv.className = "";

                
                var div = mapArray[y][x];
                div.className = "snake";
                snakeArr.push(div);

            }

            flag = true;

        }, speed);
    }

    // 创建食物
    function randomFood() {


        foodX = randomNum(0, col - 1);
        foodY = randomNum(0, row - 1);
        console.log(foodX, foodY);
        // 取到地图中的食物
        var foodDiv = mapArray[foodY][foodX];

        if (foodDiv.className == "snake") {
            randomFood();
        } else {
            foodDiv.className = "snake";
        }

    }

    // Math.random() [0, 1) 5 - 10
    // Math.random() * (10 - 5 + 1) + 5

    // 随机数函数
    function randomNum(m, n) {
        return Math.floor(Math.random() * (n - m + 1) + m);
    }

    // game over
    function judgeGameIsOver() {
        // 撞墙
        if (x < 0 || x > 24 || y < 0 || y > 24) return true;

        // 咬住自己
        var div = mapArray[y][x];

        for (var i = 1; i < snakeArr.length - 4; i++) {
            if (div == snakeArr[i]) {
                return true;
            }
        }

        return false;

    }








</script>